<template>
  <div>
    <div v-show="showExport">
      <div class="alerts" style="top: 20%;">
        <div class="alertDiv" style="width:30%;">
          <div style="text-align: center;line-height: 50px;">
            <strong class="title">按供应商导出物料</strong>
          </div>
          <div class="alertDd" style="width: 85%;margin: 10px auto;">
            <el-form label-width="150px" label-positon="left">
              <el-form-item prop="items" label="选择要导出的供应商:">
                <el-select v-model="value" filterable placeholder="请选择">
                  <el-option
                    v-for="item in AllSlist"
                    :label="item.menuName"
                    :value="item.menuName"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="buttomF">
            <el-button type="primary" class="textcolor" @click="exportSubmit">确定</el-button>
            <el-button type="primary" class="textcolor" @click.native="exportCancel">取消</el-button>
          </div>
        </div>
      </div>
      <div class="alertBg"></div>
    </div>
    <el-card style="width:100%">
      <p>物料管理</p>
      <div class="right margin-bottom">
        <!-- 操作 -->
        <div class="searchArea flex">
          <el-form ref="serachForm" :model="searchForm" :inline="true">
              <!--<el-form-item prop="searchMenuName" label="供应商:">-->
                <!--<el-select v-model="searchMenuName" filterable placeholder="请选择" clearable>-->
                  <!--<el-option-->
                    <!--v-for="item in AllSlist"-->
                    <!--:label="item.menuName"-->
                    <!--:value="item.menuName"-->
                    <!--:key="item.id"-->
                  <!--&gt;</el-option>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
               <el-form-item prop="searchCateName" label="主类别:">
                <el-select v-model="searchCateName" filterable placeholder="请选择" clearable @change="setCategoryChild">
                  <el-option
                    v-for="item in categroyList"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
                    ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="searchCateorName" label="子类别:">
                <el-select v-model="searchCateorName" filterable placeholder="请选择" clearable>
                  <el-option
                    v-for="item in searchCate"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            <el-form-item prop="action">
              <el-button size="medium" type="primary" @click="searchProduct">查询</el-button>
            </el-form-item>
            <!--<el-form-item prop="action">-->
              <!--<el-button-->
                <!--type="primary"-->
                <!--icon="el-icon-plus"-->
                <!--@click="addProductDialog"-->
              <!--&gt;新增物料</el-button>-->
            <!--</el-form-item>-->
            <el-form-item prop="action">
              <el-button type="primary" @click="dialogDetailFormVisible=true">导出</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 列表 -->
      <div class="tableBox">
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="500" stripe>
          <el-table-column prop="id" label="序号" align="center"></el-table-column>
          <el-table-column prop="image" label="产品图片" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.image" min-width="70" height="70" />
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="制造商料号" align="center"></el-table-column>
          <el-table-column prop="menuName" label="制造商" align="center"></el-table-column>
          <el-table-column prop="locked" label="是否上架" align="center">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.isShow==1">上架</el-tag>
              <el-tag type="danger" v-show="scope.row.isShow==0">下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" width="400px">
            <template slot-scope="scope">
              <el-row>

                <el-upload :action="uploadActionUrl"  style="float:left;"   :headers="{Authorization:token}" :on-success="handlePreview" >
                  <el-button type="primary" size="mini" @click="getid(scope.row)">点击上传</el-button>
                </el-upload>

                <el-button type="primary" size="mini" @click="upload(scope.row)">下载</el-button>
                <el-button type="primary" size="mini" @click="checkDetail(scope.row)">查看</el-button>
                
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 新增修改 -->
    <el-dialog title="物料" :visible.sync="dialogProductFormVisible" width="80%">
      <el-form ref="productForm" :model="productForm" label-position="left" class="infos flex">
        <el-form-item label="制造商料号" prop="productCode" style="width:50%" >
          <el-input v-model="productForm.productCode" placeholder="请输入物料号" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="AKS料号" prop="askCode" style="width:50%" >
          <el-input v-model="productForm.askCode" placeholder="请输入AKS料号" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="制造商" prop="menuName" style="width:80%">
          <el-select v-model="productForm.menuName" filterable placeholder="请选择">
            <el-option
              v-for="item in AllSlist"
              :key="item.id"
              :label="item.menuName"
              :value="item.menuName"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item
          label="对无铅要求的达标情况"
          prop="produceName"
          style="width:30%"
        >
          <el-input
            v-model="productForm.standard"
            placeholder="请输入对无铅要求的达标情况"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="湿气敏感性等级（MSL）" prop="level" style="width:30%" >
          <el-input
            v-model="productForm.level"
            placeholder="请输入湿气敏感性等级（MSL）"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
         <el-form-item label="数据列表" prop="dataList" style="width:30%" >
          <el-input v-model="productForm.dataList" placeholder="请输入数据列表" :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="包装" prop="pack" style="width:30%" >
          <el-input v-model="productForm.pack" placeholder="请输入包装" :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="零件状态" prop="partStatus" style="width:30%" >
          <el-input v-model="productForm.partStatus" placeholder="请输入零件状态" :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="重量" prop="weight" style="width:30%" >
          <el-input v-model="productForm.weight" placeholder="请输入重量" :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="life" prop="life" style="width:40%" >
            <el-select v-model="productForm.life" placeholder="请选择">
                  <el-option
                    v-for="item in lifelist"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
        </el-form-item>
        <el-form-item label="rosh" prop="rosh" style="width:40%" >
                <el-select v-model="productForm.rosh" placeholder="请选择">
                  <el-option
                    v-for="item in roshlist"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  ></el-option>
                </el-select>
        </el-form-item>

        <el-form-item label="产品族" prop="manufacturer" style="width:40%;">
          <el-select v-model="productForm.cateId" filterable placeholder="请选择" @change="setCategoryChild">
            <el-option
              v-for="item in categroyList"
              :key="item.id"
              :label="item.cateName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系列" prop="manufacturer" style="width:40%;">
          <el-select v-model="productForm.catesonId" filterable placeholder="系列">
            <el-option
              v-for="item in searchCate"
              :key="item.id"
              :label="item.cateName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="物料描述" prop="storeInfo" style="width:30%" >
          <el-input v-model="productForm.storeInfo" placeholder="请输入物料描述" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="详情描述" prop="content" style="width:30%" >
                  <el-input v-model="productForm.content"
                    type="textarea"
                    :autosize="{minRows: 2}"
                    style="width:100%"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
       
        <el-form-item label="样品图片" prop="image" style="width:40%">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :multiple="false"
            :before-upload="beforeUpload"
            :http-request="httpRequest"
            action
            list-type="picture-card"
          >
            <!-- 缩略图 -->
            <div v-if="productForm.image" style="height:100%">
              <el-image :src="productForm.image" fit="cover" style="width: 100%; height: 100%"></el-image>
            </div>
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogProductFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="productManage">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导出 -->
    <el-dialog title="导出筛选" :visible.sync="dialogDetailFormVisible">
      <el-form :model="downLoadForm">

        <el-form-item prop="searchCateName" label="产品族:">
          <el-select v-model="searchCateName" filterable placeholder="请选择" clearable @change="setCategoryChild">
            <el-option
                    v-for="item in categroyList"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="searchCateorName" label="系列:">
          <el-select v-model="searchCateorName" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in searchCate"
                    :label="item.cateName"
                    :value="item.id"
                    :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>


        <!--<el-form-item label="创建时间"-->
                        <!--prop="timeRange">-->
            <!--<el-date-picker v-model="timeRange"-->
                            <!--clearable-->
                            <!--type="daterange"-->
                            <!--range-separator="至"-->
                            <!--start-placeholder="开始日期"-->
                            <!--end-placeholder="结束日期"></el-date-picker>-->
          <!--</el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="daochu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/utils/utils";
import axios from "axios";
import { formatDate } from '@/utils/validate.js';
import {
  PRODUCT_LIST,
  modifyAmlFile2,
  PRODUCT_ADD,
  PRODUCT_UPDATE,
  PRODUCT_BATCHDELETE,
  SUPPLIER_ALLLIST,
  PRODUCT_DOWNLOAD,
  PRODUCT_IMAGE_FILE,
  CATEGORY_LIST,
  MENU_LIST,PRUDUCT_DETAIL,
  productlist,
    categorylistF,
    categorylistZ,
    producedownload
} from "@/utils/api";
import { Message } from "element-ui";

export default {
  data() {
    return {
      //0 Active量产 1 NRND不推荐新项目使用 2 Discontinued 已停产 3 Unknow
      lifelist:[{"id":0,"name":"Active量产"},{"id":1,"name":"NRND不推荐新项目使用"},
      {"id":2,"Discontinued 已停产":"Active量产"},{"id":3,"name":"Unknow"}],
      roshlist:[{"id":0,"name":"未知"},{"id":0,"name":"是"},{"id":0,"name":"否"}],
      productId:null,
      timeRange:[],
      dimage:'',
      downloadMenu:'',
      downloadCateorName:null,
      downloadhCateName:null,
      searchCate:[],
      searchCateorName:null,
      searchCateName:null,
      searchMenuName:'',
      columns: [
        { title: "id", key: "id" },
        { title: "aks料号", key: "aks" },
        { title: "制造商编号", key: "product_num" },
        { title: "制造商", key: "product_name" }
      ],
      dialogTableVisible: false,
      dialogDetailFormVisible: false,
      name: "",
      modify: 0,
      isDisabled: false,
      // 上传
      updateForm: { imageUrl: "", pdfUrl: "" },
      file: null,
      loadings: "",
      hiddenFile: null,
      downLoadForm: {
        rosh:null,
        life:null,
        AllSlist: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ],
        isShow: false,
        cateId: [
          { id: 1, menuName: "傲然" },
          { id: 2, menuName: "咩咩" },
          { id: 3, menuName: "mc" },
          { id: 4, menuName: "lulu" }
        ]
      },
      showExport: false,
      searchForm: {
        companyName: ""
      },
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogProductFormVisible: false,
      productForm: {
        id: 0,
        image: '',
        storeName: "",
        storeInfo: "",
        cateId: 0,
        catesonId: 0,
        sort: 0,
        sales: 0,
        stock: 0,
        isShow: 1,
        isHot: 1,
        addTime: 0,
        isDel: 0,
        stockPrice: 0,
        costPrice: 0,
        askCode: "",
        productCode: "",
        standard: "",
        level: "",
        endData: '',
        dataList: "",
        pack: "",
        partStatus: "",
        foxPdf: "",
        amlPdf: "",
        shopPdf: "",
        rosh: 0,
        lifeData: "0",
        menuId: 0,
        menuName: "",
        countstart1: 11,
        countend1: 12,
        price1: 15,
        countstart2: 12,
        countend2: 13,
        price2: 14,
        countstart3: 13,
        countend3: 14,
        price3: 13,
        countstart4: 14,
        countend4: 15,
        price4: 12,
        countstart5: 15,
        countend5: 16,
        price5: 11,
        price: 76,
        weight: 20.66,
        productArea: "",
        content: "",
        colume: 0
      },
      categroyList: [

      ],
      categroyChildList:[{id:0,cateName:''}],
      tableData: [
        // {
        //   id:0,
        //   image: "",
        //   manufacturerCode: "12312",
        //   manufacturer: "2335451",
        //   storeInfo: "BMW",
        //   pack: "sfds423g23g",
        //   specsBook: "10",
        //   stock: "吸塑",
        //   pricestocks: "xxx",
        //   productArea: "100",
        // }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      AllSlist: [],
      uploadActionUrl:'http://aml.foxcore.cn/api/v1/file/pdf/product',
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      value: "",
      token:'1123'
    };
  },
  mounted() {
    this.token = sessionStorage.getItem('op-token')
    this.getAllList();
    // this.searchProduct();
    // this.getCategoryList();
  },
  methods: {
    getid(row){

      this.listid = row.id
    },
    handlePreview(res){
      let src= res.data
      console.log(99999)
      console.log(this.listid)
      modifyAmlFile2({
        id:this.listid,
        amlPdf: src
      }).then(res2 => {
        if(res2.status == 200){
          Message({ message: '上传成功', type: 'success', duration: 2000 })
          this.getAllList();
        }
        // this.tableData = res2.data.dataList
        // this.total = res2.data.count
      })
    },
      daochu(){

          producedownload({
              cateId:this.searchCateName,
              catesonId: this.searchCateorName,
              startTime: new Date(this.timeRange[0]).getTime()/1000,
              endTime:new Date(this.timeRange[1]).getTime()/1000,
          }).then(res => {
              console.log(res.data)
              var url = this.downloadUrl + res.data;
              location.href = url;
          })
      },
    setCategoryChild(row){
        categorylistZ({
            id:row,
            pageSize:10,
            pageNo:1,
        }).then(res2 => {
            this.searchCate = res2.data.dataList;
        });
        console.log(this.searchCate)
      // this.searchCateorName=null
      // console.log('===>' + row)
      // var se;
      // for(se of this.categroyList){
      //    if(se.id==row){
      //       this.searchCate=se. categoryVOList
      //    }
      // }
    },
    changeCateChidList(row){
      downloadCateorName=null
      console.log('===>' + row)
      var se;
      for(se of this.categroyList){
         if(se.id==row){
            this.categroyChildList=se.categoryVOList           
         }
      }
    },
    addProductDialog(){
      this.productForm={image:''}
      this.downloadCateorName=this.productForm.catesonName
      this.dialogProductFormVisible=true
    },
    // 上传前-拦截上传格式
    beforeUpload(file) {
      console.log("==file==>" + file);
      this.productForm.image = "";
      this.hiddenFile = file;
    },
    httpRequest() {
      console.log("==httpRequest==>" + this.hiddenFile);
      // this.loadings = this.$pageLoading.service({
      //   lock: true,
      //   text: '正在上传中,请耐心等待',
      //   spinner: 'el-icon-loading'
      // })
      let param = new FormData(); // 创建form对象
      param.append("image", this.hiddenFile);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      var that = this;
      axios
        .post("http://aml.foxcore.cn/api/v1/file/image/product", param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.productForm.image =this.downloadUrl +response.data.data;
            console.log('==image=>'+this.productForm.image);
            this.$message.success("上传图片成功");
          }
          console.log(response.data.status);
        });
    },
    getCategoryList() {
      CATEGORY_LIST({}).then(res => {
        this.categroyList = res.data.dataList;
      });
    },
  getAllList() {
      categorylistF({
          pageNo: this.currentPage,
          pageSize: this.pageSize,
      }).then(res => {
          this.categroyList = res.data;
      });

      productlist({
          pageNo: this.currentPage,
          pageSize: this.pageSize,
      }).then(res3 => {
        
          this.tableData = res3.data.dataList;
          this.total = res3.data.count
          console.log(this.tableData)
      });


  },
  export2excel() {
    export2Excel(this.columns, this.tableData);
  },
  exportSubmit() {
    this.showExport = !this.showExport;
    let that = this;
    // 这里请求数据
    PRODUCT_DOWNLOAD({
      menuName: this.value
    }).then(res => {
      console.log(res.data);
      var url = that.downloadUrl + res.data;
      location.href = url;
    });
    // this.dialogTableVisible=!this.dialogTableVisible
  },
  exportCancel() {
    this.showExport = !this.showExport;
  },
  exportInfo() {
    this.showExport = !this.showExport;
  },
  delInfo() {
    if (this.$refs.multipleTable.selection.length == 0) {
      Message({
        message: "请先勾选要修改的项目",
        type: "warning",
        duration: 2000
      });
    } else {
      var deleteList = this.$refs.multipleTable.selection;
      var idlist = [];
      for (let i in deleteList) {
        idlist.push(deleteList[i].id);
      }
      PRODUCT_BATCHDELETE({
        idlList: idlist
      }).then(res => {
        if (res.status == 200) {
          Message({
            message: `${idlist}号料号已删除`,
            type: "success",
            duration: 2000
          });
          this.searchProduct();
        }
      });
    }
  },
  delProduct(row){
    console.log("==delProduct=>" + row);
    PRODUCT_BATCHDELETE({
        idlList: row.id
      }).then(res => {
        if (res.status == 200) {
          Message({
            message: `${idlist}号料号已删除`,
            type: "success",
            duration: 2000
          });
          this.searchProduct();
        }
      });
  },
  // addInfo() {
  //   this.$router.push({
  //     path: "addProduct"
  //   });
  // },
  searchProduct(){
      productlist({
      cateId:this.searchCateName,
      catesonId:this.searchCateorName,
      pageNo: this.currentPage,
      pageSize: this.pageSize
    }).then(res => {
      // console.log(res);
      this.tableData = res.data.dataList;
      this.total = res.data.count;
    });
  },
    upload(row) {

      if(row.amlPdf){
        var url = this.downloadUrl + row.amlPdf;
        console.log(url)
        location.href = url;

      }else{
        Message({ message: '无下载资料', type: 'error', duration: 2000 })
      }


    },



  checkDetail(row) {
    console.log(row)
    this.$router.push({
      path: "addProduct",
      query: {
        data: row,
        handler: "check",
        detail: "ok"
      }
    });
  },
  getDetail(row) {
    this.$router.push({
      path: "liaohao",
      query: {
        id: row.id
      }
    });
  },
  modifyInfo(row) {
    this.productId=row.id
    this.getProductDeatil()
    this.modify=1
    this.dialogProductFormVisible = true;
    console.log("row: " + JSON.stringify(row));
    this.productForm.image = row.image;
    // this.$router.push({
    //   path: "addProduct",
    //   query: {
    //     data: row,
    //     handler: "edit",
    //     detail: "not"
    //   }
    // });
  },
  handleSelectionChange(val) {
    console.log(val, "handleSelectionChange");
    this.multipleSelection = val;
  },
  handleSizeChange(val) {
    this.pageSize=val
    this.getAllList();
  },
  handleCurrentChange(val) {
     console.log(`每页 ${val} 条`);
      this.currentPage=val
      this.getAllList();
  },
  productManage(){
    if(this.modify==0){
      this.addP()
    }else{
      this.updateP()
    }
  },
  getProductDeatil(){
    PRUDUCT_DETAIL({
      id:this.productId
    }).then(res => {
        if (res.status == 200) {
          this.productForm = res.data;
        }
    });
  },
  addP () {
      console.log('addP')
      PRODUCT_ADD({
        specsBook: this.productForm.specsBook,
        image: this.productForm.image,
        productCode: this.productForm.productCode,
        askCode:this.productForm.askCode,
        storeInfo: this.productForm.storeInfo,
        menuId: this.productForm.menuId,
        menuName: this.productForm.menuName,
        standard: this.productForm.standard,
        level: this.productForm.level,
        // endData: this.productForm.endData,
        content: this.productForm.content,
        dataList: this.productForm.dataList,
        packStard: this.productForm.packStard,
        pack: this.productForm.pack,
        partStatus: this.productForm.partStatus,
        partClass: this.productForm.partClass,
        cateId: this.productForm.cateId,
        catesonId: this.productForm.catesonId,
        liaohaoName: this.productForm.liaohaoName,
        price: this.productForm.price,
        productNum: this.productForm.productNum,
        stock: this.productForm.stock,
        isShow: this.productForm.isShow
      }).then(res => {
        if (res.status == 200) {
          this.dialogProductFormVisible = false
          this.$message.success('操作成功')
          this.searchProduct()
        }
      });
    },
    updateP () {
      PRODUCT_UPDATE({
        id: this.productId,
        askCode:this.productForm.askCode,
        specsBook: this.productForm.specsBook,
        image: this.productForm.image,
        productCode: this.productForm.productCode,
        storeInfo: this.productForm.storeInfo,
        menuId: this.productForm.menuId,
        menuName: this.productForm.menuName,
        standard: this.productForm.standard,
        level: this.productForm.level,
        // endData: new Date(this.productForm.endData).getTime()/1000,
        content: this.productForm.content,
        dataList: this.productForm.dataList,
        packStard: this.productForm.packStard,
        pack: this.productForm.pack,
        partStatus: this.productForm.partStatus,
        partClass: this.productForm.partClass,
        cateId: this.productForm.cateId,
        catesonId: this.productForm.catesonId,
        partXl: this.productForm.partXl,
      }).then(res => {
        if (res.status == 200) {
          this.$message.success('操作成功')
          this.dialogProductFormVisible = false
        }
      });
    },
}}
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}

.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
.alerts {
  z-index: 2001;
  position: fixed;
  top: 20%;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.alertDiv {
  display: inline-block;
  width: 900px;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 16px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: left;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.alertDd {
  width: 80%;
  margin: 6% auto;
  color: #606266;
}
.buttomF {
  margin-right: 31%;
  margin-top: 1%;
  padding-bottom: 2%;
  float: right;
}
.alertBg {
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
}
.searchArea {
  width: 100%;
  margin-top: 15px;
  justify-content: flex-start;
}

.dialog-footer {
  text-align: center;
}
</style>